<template>
  <div id="app">
    <h2>本地文件上传预览↓</h2>
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <div class="line"></div>
    <h2>文件上传预览 + 接口返回文件流预览↓</h2>
    <FileView ref="FileView" v-loading="loadFileView"></FileView>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import FileView from './components/FileView'

export default {
  name: 'App',
  data() {
    return {
      loadFileView: false
    }
  },
  components: {
    HelloWorld,
    FileView
  },
  mounted() {
    // 文件下载
    // export const downloadFile = (url) => {
    //   return fetch({
    //     url: '接口',
    //     method: 'get',
    //     params: {
    //       fileUrl: url
    //     },
    //     responseType: 'blob'
    //   })
    // }

    this.loadFileView = true
    downloadFile(row.courseFileUrl).then(res => {
      this.loadFileView = false
      const fileSuffix = (row.courseContent.split('.')).at(-1)
      const fileSuffixEnum = {
        'ppt': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
        'docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        'image': 'image/png',
        'video': 'video/mpeg4',
        'radio': 'audio/mpeg',
        'pdf': 'application/pdf'
      }
      let file = new File([res], row.courseContent, { type: fileSuffixEnum[fileSuffix] })
      this.$refs.FileView.handleChange({ target: { files: [file] } })
    })
  }
}
</script>

<style>
html {
  overflow-y: scroll;
  font-family: helvetica, arial, sans-serif;
}

body {
  margin: 0;
  padding: 0;
}

.line {
  margin-top: 100px;
  width: 100%;
  border-bottom: 1px solid #000000;
}
</style>
